Navigate between different settings using the navigation bar. To view the names of each setting, click the hamburger menu located at the top of the screen.

When you select an option from the navigation bar, the settings panel opens. It enables you to modify the settings within the corresponding category.

Customize settings for users based on their roles. You can adjust the appearance of subscribers, VIPs, and moderators to make their messages stand out.

To customize a role, first select it from the list. Then, open the desired setting and activate the role button at the top of the settings panel. This action applies the current settings to the selected role, replacing any configurations inherited from previous roles.

The chat panel provides a real-time preview of the chat, allowing you to see changes instantly as you adjust settings.

Use the preview bar to adjust the size of the chat panel in real time. Note that this change is only for preview purposes — it won't affect the final chat size after saving. To set the actual dimensions, you'll need to configure them separately in OBS.

You can clear the chat panel at any time to remove all messages currently displayed.

Clicking the Save button will download a data.js file containing your current chat settings. For more details, refer to "First Steps" > "Save the Chat".

To add your Twitch channel, go to "General"'> "Streamer List". You can connect multiple Twitch channels by clicking the "+" button.

Once added, press "Connect" to establish the connection. To disconnect a channel, simply press "Disconnect".

Go to "General" > "User Filter" to hide messages from selected users or chatbots.

Go to "General" > "Message Filter" to block messages that contain specific words or commands.

Go to "Presets" to select a starting configuration. Choose a preset type and color theme to match your style. You can further personalize the selected preset by adjusting the settings.

When you're ready to save your chat settings, click the green "Save" button in the preview bar. This will trigger a download of the data.js file. Depending on your browser settings, you may need to grant permission for the download to proceed.

Move the "data.js" file into the "script" folder, replacing the existing file with the same name.

Open OBS and navigate to the scene where you want the chat to appear and add a new source.

Select "Browser" to add a new browser source to your scene.

Enable the "Local File" option by checking the box, then click on "Browse".

Locate and select the "Chat.html" file. In the properties window, adjust the width and height to your desired dimensions. Make sure to clear the "Custom CSS" field to avoid any conflicting styles.

Tip: To adjust the chat size later, modify the dimensions directly in the properties window by double clicking the source. Avoid resizing through other methods to ensure consistent display.

Before customizing your chat layout, consider the direction in which messages should flow — this can influence your overall design. Navigate to "General" > "Direction" to set the chat flow to either "Up" or "Down".

You can customize the Chatbox, which displays both the username and the associated message. This includes adjusting the appearance of the username and the message — such as their text styles and the design of the boxes that contain them.

The image above highlights the areas influenced by each category, helping you understand how your changes will affect the chat layout.

In the "Chatbox" settings, you can adjust the layout to define how usernames and messages are arranged. Customize the background using multiple gradients and colors to match your style. Use the masking options to control which parts of the chatbox are visible. The "Border" settings let you refine the edges and corners, while "Block Shadow" adds depth with shadow effects. Under "Sizing & Spacing", you can fine-tune the spacing between elements for a cleaner look.

The username box can be customized just like the main chatbox. You have full control over its appearance, including layout, borders, background and shadows. Additionally, you can personalize the font style in various ways and even modify the displayed text content to suit your design.

The message settings closely mirror those of the username. You can customize the message box's appearance, including layout, borders, background and shadows. Additionally, you have full control over the font style and the message text itself.

Wherever color customization is available, you can choose either a fixed color for the element or use the Twitch-assigned user color. Users can personalize their color by entering the Twitch command "/color [color name]" in chat. The available color options are provided directly by Twitch.

You can also adjust the opacity of the selected color, which is especially useful for fine-tuning background transparency and layering effects.

To reuse a specific color across multiple elements, add it to your color palette. This makes it easier to select and apply the color consistently throughout your design.

Adjust the alignment between the username and the message to suit your layout preferences. You can choose to stack them vertically or place them side by side.

If you opt for a side-by-side arrangement, you also have the option to fill any available empty space with either the username or the message. Note that this feature only works when sufficient space is present.

Adjust the stacking order of overlapping elements. You can choose whether newer or older chats appear in front and decide whether the username or the message should be displayed on top.

You can layer multiple backgrounds on an element, including solid colors, linear gradients and radial gradients. Backgrounds are stacked visually — The one at the top of the list appears in front.

Use the controls in a background's top bar to reorder it — Move up to bring it to the front or move down to send it to the back.

You can also duplicate a background to quickly reuse its style and settings.

Click on the background's name to rename it. This change is purely for organizational purposes and won't affect the style or appearance.

And of course, you can remove a background.

In the gradient bar, click on an existing thumb to modify its color. To add a new thumb, simply click on any empty space within the bar. You can also replace a thumb's color with the Twitch user color. (See the "Color Settings" section for more details.)

Click the cogwheel to open gradient settings. For linear gradients, you can set the angle of rotation to control the direction of the color flow.

For radial gradients, you can control how far the gradient spreads from its center point.

You can also set the center point's position by adjusting its X and Y axis values.

Click the arrows button to access the "Size & Position" settings.

You can reposition the background using percentage values (e.g., 0% for left-aligned, 100% for right-aligned) or pixel values — Or even combine both for precise control. Negative values are supported.

Similarly, you can adjust the background's size using these same value types. Negative values here will shrink the background.

Just like with background settings, you can apply solid areas, linear gradients, and radial gradients as masks.

In the top bar of a mask, you can reorder masks by moving them up or down. While this doesn't affect their visual appearance, it's useful for keeping your setup organized.

You can also duplicate a mask.

Click on the mask's name to rename it. This change is purely for organizational clarity and does not impact the mask's visual style or behavior.

And of course, you can remove a mask.

In the gradient bar, click on an existing thumb to adjust its opacity. To add a new thumb, simply click on any empty space within the bar. Only areas with full opacity will be fully visible. When using multiple masks, this rule still applies — Overlapping semi-transparent areas will combine, increasing overall visibility.

Click the cogwheel to access gradient settings. For linear gradients, you can set the angle of rotation.

For radial gradients, you can control how far the gradient spreads from its center.

You can also change the position of the center point by adjusting its X and Y axis values.

Click the arrows button to open the Size & Position settings.

You can position the mask using percentage values (0% for left alignment and 100% for right) or with pixel values for precise placement. These methods can also be combined. Negative values are allowed.

Negative values are supported here as well, allowing you to shrink the mask.

Click on a border within the square to customize that specific edge of the selected element.

Click on any corner to round it.

Choose a border style to apply to the selected edge. The first option is 'None', which removes the border.

Set the border thickness in pixels.

Select the color you'd like to apply to the border. (See the "Color Settings" section for more details.)

To apply the same border style or corner radius to all sides of an element, click "Append to all".

Click the "+" button to add a new shadow.

Select the shadow you want to edit from the list.

To remove a shadow, click the "x" button and choose which ones you want to delete.

You can move the shadow left or right using the X axis, and up or down using the Y axis. (Negative values are allowed)

You can use the blur setting to control how soft the shadow looks.

If you want the shadow to look bigger, you can increase its size. If you use negative values, the shadow will shrink instead.

If you want the shadow to appear inside the box instead of outside, just click the "Inset" button.

Pick the color you want the shadow to have. (See the "Color Settings" section for more details.)

You can adjust the outer space of an element to control how far it sits from the next one in that direction. (Negative values are allowed.)

You can adjust the inner space of an element to control how much room there is between its border and the content inside. (Negative values are allowed.)

You can change how the item behaves in its space. If you want it to fill up any empty area, choose the “spread” option. If you'd rather place it at a specific spot, pick an align option instead.

Username and message boxes can stretch to fill any extra vertical space if there's room.

You can switch the font to any one that's already installed on your computer.

You can change the font size.

You can change how thick or thin your text looks by adjusting the font weight:
100 => light
400 => normal
700 => bold
900 => black

You can adjust the line height of your text. To set your own line height, first uncheck the "auto" box.

You can adjust the spacing between letters.

You can add or remove text decorations.

Pick the color you want the text to have. (See the "Color Settings" section for more details.)

Click on the "+"-button to add a new shadow.

You can select the shadow you want to edit.

To remove a shadow, click on the "x"-button and select the shadows you want to remove.

You can move the shadows on the x and y axis (negative values are allowed).

With blur you can set the spread of the shadow in px.

Choose the color you want to apply to the shadow (read more about this in the "Color Settings" section).

You can change how the username and message are displayed by adjusting the content of each item.

If you want to add plain text or emojis (On Windows 11, press [WIN] + [ . ] ), just type them directly into the text box

If you want to add a specific variable like time or channel, you can insert it using curly brackets: { }.

You can adjust the size of emojis in pixels. If you turn on "auto," their size will automatically match the font size.

You can adjust how emojis and text line up with each other when they're different sizes.

To enable word wrapping for long words, turn on the feature in the "Hyphens" option.

Select the main language of your chat to ensure optimal word wrapping.

Adding animations to new messages is split into three sections: "Timing", "Animation In", and "Animation Out".

The "Timing" option lets you delay when new messages appear, set how long they take to show up, define how long they stay visible, and control the duration of their exit animation.

In "Animation In," you can customize the animation curve. To visualize the curve, click the arrow on the right, adjust the curve on the external site, and copy the "cubic-bezier" value into the input field.

You can also add various transformation types. These define the starting values of the animation, which transition to the normal state. Available options include:

- Scale
- Move horizontally
- Move vertically
- Rotate on the X-axis
- Rotate on the Y-axis
- Rotate on the Z-axis
- Change the opacity

In "Animation Out," you have the same options as in "Animation In," except the values you set will define the end keyframe of the animation.